<template>
	<!-- 底部：最新资讯和工作状态-->
	<view class="container">
		<view class="container-title">
			<view v-for="(item, index) in tabTitle" @click="onChange(index)" :key="index" class="container-title-item"
				:class="nowIndex == item.id ? 'tab-active' : ''">
				<view>{{ item.value }}</view>
				<view class="container-title-tip" v-if="nowIndex == item.id"></view>
			</view>
		</view>
		<view class="container-content">
			<view class="container-content-item" v-for="(item, index) in list" :key="index">
				<view class="item-image">
					<image :src="item.src" mode=""></image>
				</view>
				<view class="item-content">
					<view class="item-content-title">
						{{item.title}}
					</view>
					<view class="item-content-content">
						{{item.content}}
					</view>
					<view class="item-content-bottom">
						<view class="item-content-bottom-time">
							<image src="../../static/images/newIcon/new/shijian.png" mode="" style="width: 22rpx;height: 22rpx;margin-right: 20rpx;"></image>{{item.date}}
						</view>
						<view class="item-content-bottom-readNum" style="color: #FAB44E;">
							<image src="../../static/images/newIcon/new/yueduliang.png" mode="" style="width: 24rpx;height: 18rpx;margin-right: 10rpx;"></image>
							{{item.readNum}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowIndex: 0,
				tabTitle: [{
						id: 0,
						value: '最新资讯'
					},
					{
						id: 1,
						value: '工作状态'
					},
				],
				list: [{
						id: 1,
						title: '社区美丽环境小区建设',
						content: '对住宅小区的管理考核作为派出所、平安办理啦啦啦啦啦啦',
						src: '../../static/images/newIcon/new/tu1.png',
						date: '2021-10-28',
						readNum: 1628
					},
					{
						id: 2,
						title: '红临E家 民呼我为',
						content: '居民问题一键上报，临平星桥以“党建+数字啦啦啦啦啦啦啦啦”',
						src: '../../static/images/newIcon/new/tu2.png',
						date: '2021-10-28',
						readNum: 5923
					},
				]
			}
		},
		methods: {
			onChange(val) {
				this.nowIndex = val
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		margin: 18rpx 25rpx;
		background: rgba(255, 255, 255, 0.5);
		box-shadow: 2rpx 2rpx 16rpx #D3D3D3;
		border-radius: 12rpx;

		.container-title {
			display: flex;
			text-align: center;
			padding: 10rpx;

			.container-title-item {
				flex: 0.5;
				color: rgba(0, 0, 0, 0.30);
				font-size: 32rpx;
				font-weight: bold;
				line-height: 64rpx;
				letter-spacing: 2rpx;

				.container-title-tip {
					width: 60rpx;
					height: 5rpx;
					background: #FAB44E;
					margin-left: calc(50% - 30rpx);
				}
			}

			.tab-active {
				font-size: 36rpx;
				color: #FAB44E;
			}
		}

		.container-content {
			padding: 15rpx 20rpx;

			.container-content-item {
				display: flex;
				background: #fff;
				box-shadow: 0px 4px 24px 0px rgba(233, 233, 233, 0.5);
				border-radius: 6px;
				margin-bottom: 15rpx;
				padding: 10rpx;

				.item-image {
					width: 30%;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 85%;
						height: 80%;
					}
				}

				.item-content {
					width: 70%;
					padding:10rpx;
					.item-content-title {
						font-size: 28rpx;
						line-height: 56rpx;
						color: rgba(51, 51, 51, 0.6);
						font-weight: bold;
					}

					.item-content-content {
						font-size: 22rpx;
						line-height: 44rpx;
						padding-bottom:5rpx;
						color: rgba(51, 51, 51, 0.48);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.item-content-bottom{
						display: flex;
						justify-content: space-between;
						color: #8A8A8A;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>
